<template>
	<view class="content">
		<view class="content-1">
			<view class="con-box-1 active">
				<view class="con-item-1">账单金额</view>
				<view class="con-item-2">
					<span class="span">{{(form.totalAmount)}}</span>元
				</view>
			</view>
			<view class="con-box-2 active">
				<view class="con-b-1">详情</view>
				<view class="con-b-2" v-for="(item,index) in form.amountList" :key="index">
					<span class="span-1">{{item.feeName}}</span>
					<span class="span-2 span-1">{{item.amount}}元</span>
				</view>
			</view>
			<view class="con-box-3 active" @click="openCoupon" v-if="couponList.length&&form.rentAmountAll">
				<view class="con-s-1">优惠券</view>
				<view class="con-s-2 flex-1" v-if="flag">-￥{{form.differenceAmount}}</view>
				<view v-if="!flag" class="con-s-2 flex-1">{{couponList.length}}张可用</view>
				<image :src="$imgUrl + '/personal/detail-icon.png'" class="icon-1" mode=""></image>
			</view>
		</view>
		<view class="couponTip" v-if="couponList.length&&form.rentAmountAll&&!flag">
			<view class="tip">您有{{couponList.length}}张优惠券可用</view>
		</view>
		<view class="con-pay" :class="couponList.length&&form.rentAmount?'align-top':''">
			<view class="con-pay-1">本次支付：</view>
			<view class="con-pay-2">
				<view class="c-pay-1">￥{{form.discountAmount}}</view>
				<view class="c-pay-2" v-if="couponList.length&&form.rentAmountAll">优惠￥{{form.differenceAmount}}</view>
			</view>
			<view  class="con-pay-3" @click="confirmPay">确认支付</view>
		</view>
	</view>
	<uni-popup ref="checkpopup" type="bottom" @change="onchange" background-color="rgba(0,0,0,0)">
		<view class="check-popup">
			<view class="check-title">
				<view class="check-title-1">优惠券</view>
				<view class="check-title-2">可用优惠券({{couponList.length}})</view>
			</view>
			<view class="flex-1">
				<u-checkbox-group
					v-model="couponCheck"
					placement="column"
					@change="checkChange"
				>
					<view class="check-item" v-for="(item,index) in couponList" :key="index">
						<view class="check-q">
							<text v-if="item.preferentialContentType==1">{{item.marginPreference}}折</text>
							<text v-else>{{item.marginPreference}}元</text>
						</view>
						<view class="check-i">
							<view class="item-1-1">{{item.couponName}}</view>
							<view class="item-2-2">有效期至 {{$filters.formatDate(item.expirationEndTime)}}</view>
							<view class="item-3-3">
								<view class="item-4-4">{{item.usableFee}}</view>
								<u-checkbox :key="item.couponId" :name="index" activeColor="#FD9618" :disabled="item.disabled" />
							</view>
						</view>
					</view>
				</u-checkbox-group>
				<view class="check-tips">先用折扣券，再用满减卷</view>
			</view>
			<view class="check-btn" @click="confirm">确定（优惠￥{{form.differenceAmount}}）</view>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { getCouponList,checkBillCouponsOverlay,checkCouponsReturn } from '@/common/API/bills'
	import { onLoad} from "@dcloudio/uni-app"
	
	const form = reactive({
		totalAmount: null,  //账单金额
		oldRentAmount: null,
		rentAmount: null,
		id: null,
		apartmentId: null,
		discountAmount: null,  //优惠后金额
		differenceAmount: 0,  //优惠的金额
		amountList: [],
		rentAmountAll: null,//租金-优惠金额
	})
	const payId = ref(null)
	const checked = ref(null)//选中index
	const checkpopup = ref(null)
	const flag = ref(false)
	const curIndex = ref(null)//确定index
	
	const openCoupon = () => {
		checkpopup.value.open()
	}
	const cancel = () => {
		checkpopup.value.close()
	}
	const onchange = (e) => {
		if(!e.show){
			checked.value = curIndex.value
		}
	}
	// 选择优惠券 确认
	const customCouponVOS = ref<any>([])
	const confirm = async (e:any)=> {
		if(customCouponVOS.value.length){
			let data = {
				tenantUserId: uni.getStorageSync('userId'),
				storeId: form.apartmentId,
				customCouponVOS: customCouponVOS.value
			}
			let res = await checkBillCouponsOverlay(data)
		}
		flag.value = customCouponVOS.value.length > 0
		checkpopup.value.close()
	}
	// 获取优惠券列表
	const couponList = ref<any>([])
	const couponCheck = ref<any>([])
	const getCoupon = async () => {
		let data = {
			tenantUserId: uni.getStorageSync('userId'),
			storeId: form.apartmentId
		}
		couponList.value = await getCouponList(data)
	}
	
	const confirmPay = () => {
		let couponId = customCouponVOS.value.map((item)=> item.id).toString()
		uni.navigateTo({
			url: `/pages/personal/pay/index?id=${form.id}&type=RENT_ORDER&couponId=${couponId}`
		})
	}
	onLoad((options)=>{
		if(options){
			let info = JSON.parse(decodeURIComponent(options.info))
			console.log(info)
			form.totalAmount = info.unpaid
			form.discountAmount = info.unpaid
			form.rentAmountAll = info.rentAmount
			form.amountList = info.orderFeesList
			form.id = info.id
			form.apartmentId = info.apartmentId
			let rentInfo = info.orderFeesList.filter((item)=>item.feeId==1)
			if(rentInfo.length){
				form.oldRentAmount = rentInfo[0].amount-rentInfo[0].discountAmount
				form.rentAmount = rentInfo[0].amount-rentInfo[0].discountAmount
			}
			getCoupon()
		}
	})
	const checkChange = async (checkArr)=> {
		//  couponUseOverlay使用叠加 排他[]  ["1"]只能与同一优惠叠加使用 ["2"]与其他活动可叠加使用 无限制["1","2"]
		// couponId相同 为同一优惠 否则为不同优惠
		// 所有优惠券
		form.discountAmount = form.totalAmount
		form.rentAmount = form.oldRentAmount || 0
		customCouponVOS.value = []
		let discountArr = []  //折扣券
		let reduceArr = []  //满减券
		if(checkArr.length){
			for(var i=0;i<checkArr.length;i++){
				let index = checkArr[i]  //选中优惠券的index
				let list = couponList.value  //所有可用优惠券列表
				customCouponVOS.value.push({
					id: list[index].id,
					couponId: list[index].couponId
				})
				// 优惠券 折扣、满减分类
				if(list[index].preferentialContentType==1) discountArr.push(list[index])
				if(list[index].preferentialContentType==0) reduceArr.push(list[index])
				// ---优惠券选择判断
				// 排他[]
				if(list[index].couponUseOverlay=="[]"){
					couponList.value.map((item,key)=>{
						if(index==key){
							item.disabled = false
						}else{
							item.disabled = true
						}
					})
				}
				// ["1"]只能与同一优惠叠加使用
				if(list[index].couponUseOverlay=="[1]"){
					couponList.value.map((item)=>{
						if(item.couponId==list[index].couponId){
							item.disabled = false
						}else{
							item.disabled = true
						}
					})
				}
				// ["2"]与其他活动可叠加使用 同一优惠不可叠加使用
				if(list[index].couponUseOverlay=="[2]"){
					couponList.value.map((item,key)=>{
						if((item.couponId!=list[index].couponId || index==key)&&item.couponUseOverlay!="[1]"&&item.couponUseOverlay!="[]"){
							let customList = customCouponVOS.value.map((s)=> s.id)
							let couponIdList = customCouponVOS.value.map((l)=> l.couponId)
							if(!~couponIdList.indexOf((item.couponId).toString()) || !!~customList.indexOf((item.id).toString())||item.couponUseOverlay!="[2]"){
								item.disabled = false
							}else{
								item.disabled = true
							}
						}else{
							item.disabled = true
						}
					})
				}
				// 无限制"[1,2]"
				if(list[index].couponUseOverlay=="[1,2]"){
					couponList.value.map((item,key)=>{
						if(item.couponUseOverlay!="[1]"&&item.couponUseOverlay!="[]"){
							let customList = customCouponVOS.value.map((s)=> s.id)
							let couponIdList = customCouponVOS.value.map((l)=> l.couponId)
							if(!~couponIdList.indexOf((item.couponId).toString()) || !!~customList.indexOf((item.id).toString())||item.couponUseOverlay!="[2]"){
								item.disabled = false
							}else{
								item.disabled = true
							}
						}else{
							item.disabled = true
						}
					})
				}
			}
		}else{
			couponList.value.map((item)=>{
				item.disabled = false
			})
		}
		// ---总金额 优惠金额计算 先折扣 再满减 只有租金可以使用
		// 折扣
		if(form.rentAmount){
			discountArr.forEach((item)=>{
				form.rentAmount = form.rentAmount*item.marginPreference/10
			})
		}
		// 满减
		if(form.rentAmount){
			reduceArr.forEach((item)=>{
				form.rentAmount = form.rentAmount - item.marginPreference
			})
		}
		
		// 选中优惠券后的信息
		if(customCouponVOS.value.length){
			let data = {
				tenantUserId: uni.getStorageSync('userId'),
				ids: customCouponVOS.value.map((item)=> item.id),
				storeId: form.apartmentId,
				totalAmount: form.rentAmountAll
			}
			let res = await checkCouponsReturn(data)
			if(res){
				form.differenceAmount = res.totalAmount.toFixed(2)
				form.discountAmount =  (form.totalAmount>form.differenceAmount)?(form.totalAmount - form.differenceAmount).toFixed(2):0
			}
		}else{
			form.differenceAmount = 0
			form.discountAmount =  (form.totalAmount>form.differenceAmount)?(form.totalAmount - form.differenceAmount).toFixed(2):0
		}
		
		//优惠的金额 > 租金 取租金金额
		// form.differenceAmount = (form.oldRentAmount - form.rentAmount).toFixed(2)
		// if(Number(form.differenceAmount) < Number(form.oldRentAmount)){
		// 	form.differenceAmount = (form.oldRentAmount - form.rentAmount).toFixed(2)
		// }else{
		// 	form.differenceAmount = (form.oldRentAmount).toFixed(2)
		// }
		// form.discountAmount = (form.totalAmount>form.differenceAmount)?(form.totalAmount - form.differenceAmount).toFixed(2):0
		
		// 优惠金额 >= 优惠后租金金额 禁用
		if(Number(form.oldRentAmount) <= Number(form.differenceAmount)){
			couponList.value.map((item)=>{
				let list = customCouponVOS.value.map((m)=> m.id)
				if(!~list.indexOf((item.id).toString())){
					item.disabled = true
				}else{
					item.disabled = false
				}
			})
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
.content{
	height: 100%;
	display: flex;
	flex-direction: column;
	.icon-1{
		width: 48rpx;
		height: 48rpx;
	}
	.con-box-1{
		background: #fff;
		padding: 44rpx 30rpx;
		&::before{
			display: none;
		}
	}
	.con-item-1{
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: bold;
	}
	.con-item-2{
		font-size: 28rpx;
		text-align: center;
		color: rgba(253, 150, 24, 1);
		.span{
			font-size: 56rpx;
			color: rgba(253, 150, 24, 1);
		}
	}
	.con-box-2{
		background: #fff;
		padding: 30rpx 30rpx;
		.con-b-1{
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
		}
		.con-b-2{
			padding-top: 20rpx;
			.span-1{
				color: rgba(140, 145, 152, 1);
				font-size: 28rpx;
				width: 160rpx;
				display: inline-block;
			}
			.span-2{
				margin-left: 14rpx;
			}
		}
	}
	.con-box-3{
		background: #fff;
		padding: 30rpx 30rpx 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.flex-1{
			flex: 1;
			text-align: right;
		}
	}
	.con-s-1{
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
	}
	.con-s-2{
		font-size: 28rpx;
		color: rgba(255, 61, 47, 1);
	}
	.active{
		position: relative;
		&::before{
		content: " ";
		position: absolute;
		top: 0;
		width: 686rpx;
		height: 4rpx;
		border-top: 2rpx solid rgba(234, 234, 233, 1);
		}
	}
	.content-1{
		flex: 1;
	}
	.couponTip{
		padding: 0 32rpx;
		.tip{
			background: #FFE9CF;
			border-radius: 4rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #FF6600;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.con-pay{
		background: #fff;
		display: flex;
		align-items: center;
		padding: 12rpx 32rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		&.align-top{
			align-items: flex-start;
		}
		.con-pay-1{
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
		}
		.con-pay-2{
			flex: 1;
			.c-pay-1{
				font-size: 30rpx;
				font-weight: bold;
				color: rgba(255, 61, 47, 1);
			}
			.c-pay-2{
				font-size: 22rpx;
				color: rgba(140, 145, 152, 1);
			}
		}
		.con-pay-3{
			width: 292rpx;
			height: 76rpx;
			background: #FD9618;
			box-shadow: 0 6rpx 12rpx 2rpx rgba(54,127,255,0.16);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			line-height: 76rpx;
		}
	}
}
.check-popup{
	background: #F7F7F7;
	border-radius: 20rpx 20rpx 0px 0px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 1000rpx;
	padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
	.flex-1{
		flex: 1;
		overflow-y: scroll;
	}
	.check-btn{
		background: #FD9618;
		box-shadow: 0px 6rpx 12rpx 2rpx rgba(54,127,255,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		color: #fff;
		padding: 22rpx 0;
		margin: 20rpx 32rpx 68rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.icon-2{
		width: 46rpx;
		height: 46rpx;
	}
	.check-title{
		background: #fff;
		.check-title-1{
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			font-weight: bold;
			padding: 32rpx 0;
		}
		.check-title-2{
			padding: 14rpx 32rpx;
			font-size: 28rpx;
		}
	}
	.check-item{
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 20rpx 32rpx 0 32rpx;
		overflow: hidden;
		display: flex;
	}
	.check-q{
		width: 172rpx;
		background: #FD9618;
		color: #FFFFFF;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.span{
			font-size: 48rpx;
		}
	}
	.check-tips{
		font-size: 24rpx;
		color: #EE7F50;
		text-align: center;
		margin: 44rpx 0;
	}
	.check-i{
		margin:0 10rpx 0 10rpx;
		flex: 1;
		.item-1-1{
			font-size: 28rpx;
			color: #333333;
			padding-top: 20rpx;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 474rpx;
		}
		.item-2-2{
			font-size: 24rpx;
			color: #8C9198;
			padding-bottom: 8rpx;
		}
		.item-3-3{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #8C9198;
			padding: 10rpx 0 4rpx 0;
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				top: 0;
				width: 100%;
				height: 4rpx;
				border-top: 2rpx solid rgba(234, 234, 233, 1);
			}
		}
		.item-4-4{
			font-size: 24rpx;
			color: #8C9198;
		}
	}
}
</style>
